<template>
	<view class="container">
		<!-- F1 顶部头像部分 start -->
		<view class="top-box">
			<u-image width="100%" height="374rpx" src="@/static/indexBg.png"></u-image>
			<view class="avatar-box">
				<view>
					<button plain class="avatarBtn" open-type="chooseAvatar" @chooseavatar="changeAvatar">
					<view class="avatar-circle">
						<u-icon v-if="!userInfo.avatarUrl" name="account-fill" size="56" color="#ffffff"></u-icon>
						<u--image v-else  width="98rpx" height="98rpx" :src="userInfo.avatarUrl"></u--image>
					</view>
					</button>
					<!-- <text class="nickName" v-if="userInfo.nickName">{{userInfo.nickName}}</text> -->
					<input  class="nickName" type="nickname"  placeholder-style="color:#ffffff" :placeholder="userInfo.nickName" @blur="blurGet"/>
				</view>
			</view>
		</view>
		<!-- F1 顶部头像部分 end -->
		<!-- F2 我的订单 start -->
		<view class="myOrders-container">
			<view class="title-box">
				<text class="title">我的订单</text>
			</view>
			<view class="order-icon-container">
				<view class="order-button" v-for="(item,index) in orderMenu" :key='index' @click="handleClick(item,index)">
					<view class="icon-box">
						<u-badge max="99" :value="item.count" :offset="[-8,-8]" absolute></u-badge>
						<image :src="item.icon"></image>
						<u-text size="26rpx" type="info" :text="item.text"></u-text>
					</view>
				</view>
			</view>
		</view>
		<!-- F2 我的订单 end -->
		<!-- F3 列表 start -->
		<view class="listMenu-container">
			<u-cell-group>
				<u-cell 
				:icon="item.icon" 
				:isLink="true" 
				clickable 
				rightIcon="arrow-right" 
				:title="item.title"
				 v-for="(item,index) in listMenu" 
				 :key="index"
				 @click="handleListClick(item,index)"
				 ></u-cell>
			</u-cell-group>
		</view>
		<!-- F3 列表 end -->
	</view>
</template>

<script>
	import {findUserOrderInfo} from "@/api/api.js"
	export default{
		data(){
			return{
				userInfo:{
					avatarUrl:"",
					city:"",
					country:'',
					gender:'',
					nickName:'',
					province:'',
					//订单菜单
				},
				orderMenu:[
					{
						icon:require("@/static/unpay.png"),
						text:"待付款",
						count:'0'
					},
					{
						icon:require("@/static/received.png"),
						text:"已完成",
						count:'0'
					},
				],
				listMenu:[
					{
						title:'全部订单',
						icon:require("@/static/allOrders.png"),
					},
					// {
					// 	title:'收货地址',
					// 	icon:require("@/static/address.png"),
					// },
					{
						title:'合同管理',
						icon:require("@/static/contractIcon.png"),
					},
					{
						title:'关于我们',
						icon:require("@/static/about.png"),
					},
				]
				
			}
		},
		onLoad() {
			this.getUserInfoFromWeiXin();
		},
		onTabItemTap(){
			console.log('页面展示了');
			this.getUserInfoFromWeiXin();
			this.getOrderInfo();
		},
		methods:{
			async getOrderInfo(){
				let query = `pageNum=${1}&pageSize=${100}&state=${0}`
				let params = `pageNum=${1}&pageSize=${100}&state=${1}`
				const res = await findUserOrderInfo(query)
				const data = await findUserOrderInfo(params)
				if(res?.data.code == 200 && data?.data.code == 200){
					if(res.data.data && data.data.data){
						this.orderMenu[0].count = res.data.data.total
						this.orderMenu[1].count = data.data.data.total
					}
				}else{
					uni.$u.toast(res.data.msg || data.data.msg)
				}	
			},
			blurGet(e){
				console.log(e);
				if(e.detail.value == ''){
					return
				}
				this.userInfo.nickName = e.detail.value
				uni.setStorageSync("weixinAccount",this.userInfo)
			},
			changeAvatar(e){
				console.log(e);
				this.userInfo.avatarUrl = e.detail.avatarUrl
				uni.setStorageSync("weixinAccount",this.userInfo)
			},
			getUserInfoFromWeiXin(){
				this.userInfo = uni.getStorageSync("weixinAccount")
			},
			handleClick(item,index){
				if(index == 0){
					uni.navigateTo({
						url:"/pages/user/orderCenter?state="+index
					})
				}else{
					uni.navigateTo({
						url:"/pages/user/orderCenter?state="+index
					})
				}
			},
			handleListClick(item,index){
				console.log("点击了列表菜单",item,index);
				let url 
				switch (index){
					case 0:
						url = "/pages/user/orderCenter"
						this.jump(url)
						break;
					case 1:
						url = "/pages/user/contractManage"
						this.jump(url)
						
						break;
					case 2:
						url = "/pages/introduce/introduce"
						uni.switchTab({
							url
						})
						break;
					case 3:
						url = ""
						break;
				}
			},
			jump(url){
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		// F1
		.top-box{
			height: 374rpx;
			width: 100%;
			background-color: #17CC77;
			position: relative;
		}
		.avatar-box{
			position: absolute;
			bottom: 60rpx;
			left: 30rpx;
			.avatarBtn{
				border: 0;
			}
			.avatar-circle{
				border-radius: 50%;
				width: 98rpx;
				height: 98rpx;
				border:8rpx solid #ffffff;
				justify-content: center;
				overflow: hidden;
			}
			:nth-child(1){
				display: inline-flex;
				align-items: center;
				.nickName{
					margin-left: 30rpx;
					color: #ffffff;
					font-size: 38rpx;
				}
			}
		}
		// F2 
		.myOrders-container{
			height: 226rpx;
			width: 100%;
			background-color: #ffffff;
			.title-box{
				padding: 30rpx 0;
				.title{
					margin-left: 60rpx;
				}
			}
			
			.order-icon-container{
				height: 50%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				.order-button{
					.icon-box{
						position: relative;
						display: flex;
						flex-direction: column;
						image{
							width: 48rpx;
							height: 48rpx;
							margin: auto;
						}
					}
				}
			}
		}
		// F3
		.listMenu-container{
			background-color: #ffffff;
		}
	}
</style>